import React, { useState, useEffect } from "react";
import styles from "./MeNew.module.css";
import { UserAddOutline, SearchOutline, UnorderedListOutline, ShopbagOutline, HeartOutline } from 'antd-mobile-icons';
import { useNavigate } from "react-router-dom"; 
import http from '../utils/http'

// 作品视频列表
const worksVideos = [
    { id: 1, src: "video1.mp4", viewCount: "2.4w" },
    { id: 2, src: "video2.mp4", viewCount: "1920" }
];

// 私密视频列表
const privateVideos = [
    { id: 3, src: "video3.mp4", viewCount: "1.1W" },
    { id: 4, src: "video4.mp4", viewCount: "2990" }
];

// 收藏视频列表
const collectedVideos = [
    { id: 5, src: "video5.mp4", viewCount: "500" },
    { id: 6, src: "video6.mp4", viewCount: "300" }
];

// 喜欢视频列表
const likedVideos = [
    { id: 7, src: "video7.mp4", viewCount: "800" },
    { id: 8, src: "video3.mp4", viewCount: "600" }
];


export default function Me() {
    // 我的页面跳关注页面
    const navigate = useNavigate();
    const [enlargedVideo, setEnlargedVideo] = useState(null);
    // 一开始显示作品视频
    const [currentVideos, setCurrentVideos] = useState(worksVideos);
    // 记录当前选中的标签
    const [selectedTab, setSelectedTab] = useState("作品");

    // 获取朋友粉丝列表
    const [followedFensi, setFollowedFensi] = useState([])
    const getlist = async () => {
        const res = await http.get('/friend')
        setFollowedFensi(res.data.data)
    }
    useEffect(() => {
        getlist()

    }, [])

    // 获取个人信息
    const [userInfo, setUserInfo] = useState([])
    const getuser = async () => {
        const res = await http.get('/edituser')
        setUserInfo(res.data.data)
    }
    useEffect(() => {
        getuser()
    }, [])

    // 点击视频视频播放
    const handleVideoClick = (video) => {
        const videoElement = document.querySelector(`video[src="${video.src}"]`);
        if (enlargedVideo === video) {
            // 退出放大状态，暂停视频
            setEnlargedVideo(null);
            if (videoElement) {
                videoElement.pause();
            }
        } else {
            // 进入放大状态，播放视频
            setEnlargedVideo(video);
            if (videoElement) {
                videoElement.play().catch((error) => {
                    console.error('视频播放出错:', error);
                });
            }
        }
    };

    // 点击作品展示作品里的视频 
    const handleTabClick = (tab) => {
        setSelectedTab(tab);
        switch (tab) {
            case "作品":
                setCurrentVideos(worksVideos);
                break;
            case "私密":
                setCurrentVideos(privateVideos);
                break;
            case "收藏":
                setCurrentVideos(collectedVideos);
                break;
            case "喜欢":
                setCurrentVideos(likedVideos);
                break;
            default:
                break;
        }
    };

    return (
        <div>

            <div className={styles.top}>
                {/* 显示时间 */}
                <span className={styles.time}>9:41</span>
                {/* 功能按钮区域 */}
                <div className={styles.functionButtons}>
                    <button className={styles.addFriendBtn}><UserAddOutline /><span>添加朋友</span></button>
                    <button className={styles.newVisitorBtn}>新文客121</button>
                    {/* 搜索和菜单按钮 */}
                    <span className={styles.searchIcon}><SearchOutline /></span>
                    <span className={styles.menuIcon}><UnorderedListOutline /></span>
                </div>
                {/* 头像和个人信息 */}
                <div className={styles.avatarAndText}>
                    <img src="1.jpg" className={styles.phonto} alt="Avatar" />
                    <div className={styles.userInfo}>
                        <h2 className={styles.userName}>烦</h2>
                        <span className={styles.douyinId}>抖音号: 1231231</span>
                    </div>
                </div>
            </div>
            <div className={styles.bottom}>
                {/* 个人信息统计 */}
                {/* 顶部盒子包括的四块 */}
                <div className={styles.fensi}>
                    {/* 每一个小模块都居中 */}
                    <div className={styles.statItem}>
                        {/* 数量 */}
                        <span className={styles.statNum}>5.6W</span>
                        <span className={styles.statLabel}><HeartOutline /> 获赞</span>
                    </div>
                    <div className={styles.statItem}>
                        <span className={styles.statNum}>2</span>
                        <span className={styles.statLabel}>朋友</span>
                    </div>
                    <div className={styles.statItem} onClick={() => { navigate('/my/friends') }}>
                        <span className={styles.statNum}>
                            {followedFensi.filter((item) => item.isguanzhu == true).length}
                        </span>
                        <span className={styles.statLabel}>关注</span>
                    </div>
                    <div className={styles.statItem} onClick={() => { navigate('/my/fans') }}>
                        <span className={styles.statNum}>
                            {followedFensi.filter((item) => item.isguanzhu == false).length}
                        </span>
                        <span className={styles.statLabel}>粉丝</span>
                    </div>
                    <div className={styles.statItem} onClick={() => navigate('/edit-profile')}>
                        <span className={styles.editProfileBtn}>编辑主页</span>
                    </div>
                </div>

                {/* 介绍输入区域 */}
                <textarea
                    className={styles.jsarea}
                    placeholder="点击添加介绍，让大家认识你..."
                ></textarea>
                
                {/* 标签添加区域 */}
                <div className={styles.tagsArea}>
                    <button className={styles.addTagBtn}>+ 添加年龄、所在地等标签</button>
                </div>
                
                {/* 抖音商城推广区域 */}
                <div className={styles.shopPromo} onClick={() => navigate('/shopping')}>
                    <div className={styles.shopIcon}><ShopbagOutline /></div>
                    <span className={styles.shopText}>抖音商城</span>
                </div>
                
                {/* 操作按钮区域 */}
                <div className={styles.actionButtons}>
                    <button className={styles.editBtn}>编辑资料 70%</button>
                    <button className={styles.addBtn}><UserAddOutline /> 添加朋友</button>
                </div>
                {/* 内容分类区域 */}
                <div className={styles.contentTabs}>
                    <button
                        className={`${styles.tabBtn} ${selectedTab === "作品" ? styles.activeTab : ""}`}
                        onClick={() => handleTabClick("作品")}
                    >
                        作品
                    </button>
                    <button
                        className={`${styles.tabBtn} ${selectedTab === "私密" ? styles.activeTab : ""}`}
                        onClick={() => handleTabClick("私密")}
                    >
                        私密
                    </button>
                    <button
                        className={`${styles.tabBtn} ${selectedTab === "收藏" ? styles.activeTab : ""}`}
                        onClick={() => handleTabClick("收藏")}
                    >
                        收藏
                    </button>
                    <button
                        className={`${styles.tabBtn} ${selectedTab === "喜欢" ? styles.activeTab : ""}`}
                        onClick={() => handleTabClick("喜欢")}
                    >
                        喜欢
                    </button>
                </div>
                
                {/* 作品展示区域 */}
                <div className={styles.workDisplay}>
                    {currentVideos.length > 0 ? (
                        currentVideos.map((video) => (
                            <div key={video.id} className={styles.workItem}>
                                <div className={styles.workThumbnail}>
                                    <video
                                        src={video.src}
                                        onClick={() => handleVideoClick(video)}
                                        className={enlargedVideo === video ? styles.enlargedVideo : ''}
                                        poster="thumbnail.jpg"
                                    >
                                    </video>
                                    <div className={styles.videoOverlay}>
                                        <span className={styles.workViewCount}>▶ {video.viewCount}</span>
                                    </div>
                                </div>
                            </div>
                        ))
                    ) : (
                        <div className={styles.emptyWorkState}>
                            <p>暂无{selectedTab}内容</p>
                            <button className={styles.recordNewBtn} onClick={() => navigate('/video')}>
                                + 录制新视频
                            </button>
                        </div>
                    )}
                </div>
                
                {/* 视频放大时的播放界面 */}
                {enlargedVideo && (
                    <div className={styles.videoPlayerOverlay}>
                        <div className={styles.videoPlayerContainer}>
                            <video
                                src={enlargedVideo.src}
                                controls
                                autoPlay
                                className={styles.videoPlayer}
                            ></video>
                            <div className={styles.closeVideoBtn} onClick={() => setEnlargedVideo(null)}>
                                ×
                            </div>
                            <div className={styles.videoControls}>
                                <button className={styles.likeButton}>
                                    <HeartOutline /> 喜欢
                                </button>
                                <button className={styles.shareButton}>
                                    分享
                                </button>
                            </div>
                        </div>
                    </div>
                )}

            </div>
        </div>
    );
}